<template>
  <el-row class="content">
    <el-col
      v-show="$common.treeVisible"
      :span="3"
      style="border-right: #90939955 solid 1px"
    >
      <div class="title"><span>尾矿库列表</span></div>
      <el-tree
        class="big-font-tree tree"
        ref="tree"
        :draggable="draggable"
        :highlight-current="highlightCurrent"
        :data="tree"
        :props="defaultProps"
        node-key="id"
        @node-click="nodeClick"
        default-expand-all
        :default-expanded-keys="defaultExpandedKeys"
      >
        <!--<span class="custom-tree-node" slot-scope="{ node, data }">
          <span>
            <i :class="data.icon" :style="{ color: data.color }"></i
            >{{ node.label }}
          </span>
        </span> -->
      </el-tree>
    </el-col>
    <el-col :span="$common.treeVisible ? 21 : 24">
      <slot></slot>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "TextTree",
  props: {
    // defaultExpandKeys: {
    //   type: Array,
    //   default: () => [5],
    //   require: true,
    // },
    // defaultExpandAll: {
    //   type: Boolean,
    //   default: true,
    //   require: true,
    // },
    tree: {
      type: Array,
      default() {
        return [];
      },
    },
    draggable: {
      type: Boolean,
      default: false,
    },
    highlightCurrent: {
      type: Boolean,
      default: true,
    },
    accordion: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentNode: null,
      currentId: -1,
      currentTreeNode: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
      defaultExpandedKeys: [Number(sessionStorage.getItem("sensorId")), 1283],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.tree.setCurrentKey(1);
      this.expandRoot();
      this.expandDefault();
    });
  },
  methods: {
    expandRoot() {
      if (this.$refs.tree.root.childNodes) {
        this.$refs.tree.root.expanded = true;
        this.$refs.tree.root.childNodes.forEach(
          (node) => (node.expanded = true)
        );
      }
    },

    nodeClick(d, node, tree) {
      if (this.currentId !== node.id) {
        this.currentNode = node;
        if (d) {
          this.currentId = node.id;
          this.currentNode = d;
          this.$emit("leaf-click", d, node, tree);
          window.sessionStorage.setItem("sensorId", d.id);
        }
        this.$emit("node-click", d, node, tree);
      }
    },
    expandDefault(arr) {
      if (arr) {
        arr.forEach((node) => {
          if (node.data && node.data.default !== undefined)
            node.expanded = node.data.default;
          if (this.currentNode === null && node.isLeaf)
            this.nodeClick(node.data, node, this.$refs.tree);
          if (node.childNodes) this.expandDefault(node.childNodes);
        });
      } else if (this.$refs.tree.root.childNodes)
        this.expandDefault(this.$refs.tree.root.childNodes);
    },
  },
};
</script>

<style scoped>
.tree {
  height: 89vh;
  background-color: #06335b;
  color: #fff;
}
.title {
  background-color: #06335b;
  text-align: center;
  color: #fff;
  line-height: 2;
}
.title > span {
  font-size: 0.09rem;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: linear-gradient(135deg, #0c4b82 20%, #fff 80%);
}
</style>
<style >
.big-font-tree .el-tree-node__label {
  font-size: 0.09rem;
}
.big-font-tree .el-tree-node.is-current > .el-tree-node__content {
  background: -webkit-linear-gradient(135deg, #0c4b82 20%, #fff 80%);

  background: -webkit-linear-gradient(315deg, #0c4b82 20%, #fff 80%);

  background: linear-gradient(135deg, #0c4b82 20%, #fff 80%);
}
.big-font-tree .el-tree-node__content:hover {
  background: -webkit-linear-gradient(135deg, #0c4b82 20%, #fff 80%);

  background: -webkit-linear-gradient(315deg, #0c4b82 20%, #fff 80%);

  background: linear-gradient(135deg, #0c4b82 20%, #fff 80%);
}
</style>